﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>叫号大屏</title>
    <script src="jquery.js"></script>
    <script src="axios.min.js"></script>
    <style type="text/css">

                a.navbar-brand {
                    white-space: normal;
                    text-align: center;
                    word-break: break-all;
                }

                /* Provide sufficient contrast against white background */
                a {
                    color: #0366d6;
                }

                .btn-primary {
                    color: #fff;
                    background-color: #1b6ec2;
                    border-color: #1861ac;
                }

                .nav-pills .nav-link.active, .nav-pills .show > .nav-link {
                    color: #fff;
                    background-color: #1b6ec2;
                    border-color: #1861ac;
                }

                /* Sticky footer styles
        -------------------------------------------------- */
                html {
                    font-size: 14px;
                }

                @media (min-width: 768px) {
                    html {
                        font-size: 16px;
                    }
                }

                .border-top {
                    border-top: 1px solid #e5e5e5;
                }

                .border-bottom {
                    border-bottom: 1px solid #e5e5e5;
                }

                .box-shadow {
                    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
                }

                button.accept-policy {
                    font-size: 1rem;
                    line-height: inherit;
                }

                /* Sticky footer styles
        -------------------------------------------------- */
                html {
                    position: relative;
                    min-height: 100%;
                }

                body {
                    /* Margin bottom by footer height */
                    margin-bottom: 60px;
                }

                .footer {
                    position: absolute;
                    bottom: 0;
                    width: 100%;
                    white-space: nowrap;
                    line-height: 60px; /* Vertically center the text there */
                }
    </style>
</head>
<body>
    <!-- 两种方式都是直接播放流 -->
    <audio id="audio"muted controls autoplay  ></audio><!-- 第一种方式,通过ajax去后台获取文件流, 需要我们拼接获取的流，然后放入audio播放 -->
    <!--<audio src="http://localhost:8080/getBase2" controls="controls"></audio>-->
    <!-- 第二种方式则是提供一个地址给audio去后台获取流，无需前端代码操作 -->
    <div>

    </div>

    <script type="text/javascript">

        var server = 'ws://localhost:9600'; //如果开启了https则这里是wss
        var WEB_SOCKET = new WebSocket(server + '/ws');


        //打开连接后，加入组
        WEB_SOCKET.onopen = function (evt) {
            console.log('打开连接 ...');

            var msg = {
                action: 'join',
                msg: 'CallScreen',
                nick: '网页大屏'
            };
            WEB_SOCKET.send(JSON.stringify(msg));
        };
        //收到消息后
        WEB_SOCKET.onmessage = function (evt) {
            console.log('收到消息: ' + evt.data);
            GetAllInterFace(evt.data);
        };
        //关闭
        WEB_SOCKET.onclose = function (evt) {
            console.log('关闭连接.');
        };

        //发送消息
        function SendFun() {
            var msg = {
                action: 'send_to_room',
                msg: '测试',
                nick: '网页大屏'
            };
            WEB_SOCKET.send(JSON.stringify(msg));
        };
        //离开
        function SendFun() {
            var msg = {
                action: 'leave',
                msg: '测试',
                nick: '网页大屏'
            };
            WEB_SOCKET.send(JSON.stringify(msg));
        };
        //url地址获取
        function GetGuDing(Ext) {
            var Curpath = window.document.location.href;
            var rootpath = Curpath.split("//")[0] + "//" + Curpath.split("//")[1].split("/")[0];
            console.log(rootpath);
            var InterFaceUrl = rootpath + Ext;
            console.log(InterFaceUrl);
            return InterFaceUrl;
        }
        //获取所有接口工具
        function GetAllInterFace(text) {
            axios({
                method: 'get',
                url: GetGuDing('/api/Tools/Text2Vocie') + "?text=" + text,
                // headers: header,
                responseType: 'json'
            }).then(function (response) {
                console.log('获取到的数据');
                var res = response.data;
                console.log(res);
                if (res.result && res.returnData) {
                    PalyBase64Vioce(res.returnData);
                }
                //$.get("http://localhost:8080/getBase", function (data) {
                //    document.getElementsByTagName("audio")[0].setAttribute("src", "data:audio/wav;base64," + data);
                //});

            }).catch(function (error) {
                console.log(error);
            });
        }
        //播放base64语音
        function PalyBase64Vioce(Base64Data) {

            $("#audio").attr("volume", "0.5");
            $("#audio").attr("src", "data:audio/wav;base64," + Base64Data);
            console.log($("#audio")[0]);
            // 播放音频
            $("#audio")[0].play();
            // 暂停音频
            //$("#audio")[0].pause();
        }

    </script>
</body>
</html>